<template>
	<view class="container">
		<!-- 	<scroll-view scroll-with-animation :scroll-x="true" class="scroll-h" @scrolltolower="getMore">
			<view v-for="(tab, index) in tabBars" :key="tab.id" class="uni-tab-item" :id="tab.id" :data-current="index" @click="getListByType(tab.type, index)">
				<text class="uni-tab-item-title" :class="tabIndex==index ? 'uni-tab-item-title-active' : ''">{{tab.name}}</text>
			</view>
		</scroll-view>
		 -->
		<scroll-view scroll-x class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index==tabIndex?'text-orange cur':''" v-for="(tab,index) in tabBars" :key="index"
				 @tap="getListByType(tab.type, index)" :data-id="index">
					{{ tab.name }}
					<!-- <view class="line"></view> -->
				</view>
			</view>
		</scroll-view>

		<view class="line-h"></view>

		<view class="content">
			<view class="cu-form-group" v-if="deliveryMode === CREATE_ORDER.ANSHI_PEISONG">
				<view class="title">日期</view>
				<picker mode="date" :value="searchDate" :start="start" @change="DateChange">
					<view class="picker" style="height: 80rpx;">
						{{reqParam.createDate}}
					</view>
				</picker>
			</view>
			<view class="new">
				<view>{{currentType}}{{reqParam.createDate}}</view>
				<view>{{result[0].scripture_text}}</view>
				<view class="cu-form-group margin-top">
					<view class="title">
						复制全部
						<switch @change="copyAll" :class="copyAllFlag?'checked':''" :checked="copyAllFlag?true:false"></switch>
					</view>
					
					<!-- <button class="add-btn" @click.native="copyText">复制经文</button> -->
					<button class="cu-btn bg-green shadow-blur round" style="width: 200rpx;" @click.native="copyText">复制经文</button>
				</view>
				
			</view>
			<view class="old">
				<view class="">复习</view>
				<template v-for="item in result">
					<!-- <uni-card title="标题文字" extra="额外信息" note="Tips" >
						{{item.scripture_text}}
					</uni-card> -->
					<view class="scripture_item">
						{{item.scripture_text}}
					</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	import uniCard from '@/components/uni-card/uni-card.vue'
	export default {
		components: {
			uniCard
		},
		data() {
			return {
				reqParam: { // 分页请求数据参数对象
					type: 'A',
					createDate: this.$util.getDate()
				},
				result: [],
				tabIndex: 0,
				currentIndex: 0,
				currentType: '新约背节',
				searchDate: '',
				copyAllFlag: false,
				allTypeText: '',
				tabBars: [{
					id: "tab01",
					name: '新约',
					type: 'A'
				}, {
					id: "tab02",
					name: '旧约',
					type: 'B'
				}, {
					id: "tab03",
					name: '背章',
					type: 'C'
				}, {
					id: "tab04",
					name: '诗篇',
					type: 'D'
				}, {
					id: "tab05",
					name: '箴言',
					type: 'E'
				}, {
					id: "tab06",
					name: '主题',
					type: 'F'
				}],
			};
		},
		onLoad() {
			// this.tabBars.forEach((tabBar) => {
			// 	this.newsList.push({
			// 		requestParams: {
			// 			type: tabBar.type
			// 		},
			// 		data: [],
			// 	});
			// });
			this.getList();

			// console.log('this.newsList: ', this.newsList)
		},
		methods: {
			copyAll(e) { // 记住用户名和密码
				this.copyAllFlag = e.detail.value
			},
			async copyText() {
				let copyedText = ''
				if(this.copyAllFlag){
					copyedText = await this.getAllScriptureText()
				}else{
					// let result = this.result.map((item, index) => item.scripture_text)
					// // console.log(result)
					// let copyText = result.join('\n')
					// copyedText = `${this.currentType} ${this.reqParam.createDate} \n${result[0]}\n复习\n${copyText}`
					copyedText = this.getCopyText(this.result, this.currentType)
				}
				console.log('复制文字', copyedText)
				uni.setClipboardData({
					data: copyedText,
					success: function(res) {
						uni.getClipboardData({
							success: function(res) {
								uni.showToast({
									title: '已复制到剪贴板'
								});
							}
						});
					}
				});
			},
			DateChange(e) {
				this.reqParam.createDate = e.detail.value
				this.getList()
			},
			getListByType(type, index) {
				this.reqParam.type = type
				this.currentType = this.tabBars[index].name
				this.tabIndex = index
				this.getList()
			},
			async getAllScriptureText(){
				let allTypeText = ''
				// const scriptureType = ['A', 'B','C','D','E','F']
				// await scriptureType.forEach((type, index) => {
				// 	setTimeout(async () => {
				// 		let result = await this.$http.call('/scriptureAction/searchScripturesByDate.action', {
				// 			...this.reqParam,
				// 			type
				// 		});
				// 		if(result && result.length){
				// 			let result = this.result.map((item, index) => item.scripture_text)
				// 			let copyText = result.join('\n')
				// 			let copyedText = `${this.currentType} ${this.reqParam.createDate} \n${result[0]}\n复习\n${copyText}`
				// 			copyedText += '\n\n\n'
				// 			allTypeText += copyedText
				// 		}
				// 	}, (100 * index));
				// })
				let result = ''
				result = await this.$http.call('/scriptureAction/searchScripturesByDate.action', {
					...this.reqParam,
					type: 'A'
				});
				allTypeText += this.getCopyText(result, '新约背节')
				
				result = await this.$http.call('/scriptureAction/searchScripturesByDate.action', {
					...this.reqParam,
					type: 'B'
				});
				allTypeText += this.getCopyText(result, '旧约背节')
				
				result = await this.$http.call('/scriptureAction/searchScripturesByDate.action', {
					...this.reqParam,
					type: 'C'
				});
				allTypeText += this.getCopyText(result, '背章')
				
				result = await this.$http.call('/scriptureAction/searchScripturesByDate.action', {
					...this.reqParam,
					type: 'D'
				});
				allTypeText += this.getCopyText(result, '诗篇')
				
				result = await this.$http.call('/scriptureAction/searchScripturesByDate.action', {
					...this.reqParam,
					type: 'E'
				});
				allTypeText += this.getCopyText(result, '箴言')
				
				result = await this.$http.call('/scriptureAction/searchScripturesByDate.action', {
					...this.reqParam,
					type: 'F'
				});
				allTypeText += this.getCopyText(result, '主题经文')
				
				console.log('全部经文',allTypeText)
				return allTypeText
			},
			/**
			 * 获取经文 需要放在粘贴板上的经过处理后的文字
			 */
			getCopyText(result, type){
				let result1 = result.map((item, index) => item.scripture_text)
				let todayScripture = result1[0]
				let reviewScripture = result1.slice(1)
				let copyText = reviewScripture.join('\n')
				let copyedText = `${type} ${this.reqParam.createDate} \n${todayScripture}\n复习\n${copyText}\n\n\n\n`
				return copyedText
			},
			async getList() { // 1代表的意思是是否是以一次加载数据，再次的话需要push进数组中
				// let activeTab = this.newsList[index];
				// activeTab.requestParams.createDate = this.date
				// activeTab.isLoading = true;
				// console.log('activeTab: ', activeTab)
				let result = await this.$http.call('/scriptureAction/searchScripturesByDate.action', {
					...this.reqParam
				});
				if(result && result.length){
					this.result = result
				}
					
				// uni.request({
				// 	// url: 'https://unidemo.dcloud.net.cn/api/news',
				// 	url: 'http://www.shangdihuayu.top/tiantainbeishengjingJDK7/scriptureAction/searchScripturesByDate.action',
				// 	data: this.reqParam,
				// 	success: (res) => {
				// 		console.log('天天背圣经后台返回:', res)
				// 		this.result = res.data.result
				// 		// console.log('result:', result)
				// 		// const data = result.map((data) => {
				// 		// 	return {
				// 		// 		create_date: data.create_date,
				// 		// 		scripture_no: data.scripture_no,
				// 		// 		scripture_text: data.scripture_text,
				// 		// 		type: data.type,
				// 		// 		date_date: friendlyDate(new Date(data.update_date))
				// 		// 	};
				// 		// });
				// 		// // 列表数据集合
				// 		// this.newsList[index].data = data
				// 		// this.refreshing = false;
				// 	},
				// 	fail: (err) => {
				// 		uni.showModal({
				// 			content: err.errMsg,
				// 			showCancel: false
				// 		})
				// 	},
				// 	complete: (e) => {}
				// });
			},
		}
	}
</script>


<style lang="scss">
	.container {
		width: 100vw;
		font-size: 34rpx;

		.cu-item {
			height: 70rpx;
			line-height: 70rpx;
		}
	}

	.content {
		position: absolute;
		width: 730rpx;
		top: 80rpx;
		display: flex;
		flex-direction: column;
		padding: 0 10rpx;

		.new,
		.old {
			display: flex;
			flex-direction: column;
			width: 730rpx;
			padding: 0 10rpx;
			background-color: #fff;
			border-radius: 8rpx;
			box-shadow: 0px 0px 1px 1px gray;
		}

		.new {
			margin-bottom: 20rpx;
		}

		.old {}
	}

	.scripture_item {
		width: 100%;
		background-color: #fff;
		margin-bottom: 10rpx;

	}

	/* #ifndef APP-PLUS */
	page {
		width: 100%;
		min-height: 100%;
		display: flex;
	}

	/* #endif */

	.tabs {
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		background-color: #ffffff;
		/* #ifdef MP-ALIPAY || MP-BAIDU */
		height: 100vh;
		/* #endif */
	}

	.scroll-h {
		position: fixed;
		top: 0;
		background-color: #fff;
		z-index: 1;
		width: 750upx;
		height: 80upx;
		flex-direction: row;
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		/* #endif */
		/* flex-wrap: nowrap; */
		/* border-color: #cccccc;
		border-bottom-style: solid;
		border-bottom-width: 1px; */
	}

	.line-h {
		height: 1upx;
		background-color: #cccccc;
	}

	.uni-tab-item {
		/* #ifndef APP-PLUS */
		display: inline-block;
		/* #endif */
		flex-wrap: nowrap;
		padding-left: 34upx;
		padding-right: 34upx;
	}

	.uni-tab-item-title {
		color: #555;
		font-size: 30upx;
		height: 80upx;
		line-height: 80upx;
		flex-wrap: nowrap;
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		/* #endif */
	}

	.uni-tab-item-title-active {
		color: #007AFF;
	}

	.swiper-box {
		flex: 1;
	}

	.swiper-item {
		flex: 1;
	}
</style>
